<!DOCTYPE html>
<html>

<head>
    <include file="public@head" title="文章发布" keywords="后台管理系统"/>
    <style>
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0;
        }

        .pic-more {
            float: left;
            margin: 0px 0px 0px 10px;
            width: 800px;
        }

        .pic-more li {
            width: 24%;
            float: left;
            padding-left: 1%;
        }

        .pic-more li .layui-input {
            display: initial;
        }

        .pic-more li a {
            position: absolute;
            top: 0;
            display: block;
        }

        .pic-more li a i {
            font-size: 24px;
            background-color: #008800;
        }
    </style>
</head>

<body class="layui-layout-admin">
<include file="public@header"/>
<include file="public@side"/>
<div class="layui-body">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a href="{:url('admin/index/index')}">主页</a>
        <a>内容管理</a>
        <a href="{:url('index')}">文章管理</a>
        <a><cite>添加文章</cite></a>
    </div>
    <div class="layui-fluid">
        <div class="layui-card layui-row">
            <div class="layui-card-body">
                <form method="post" class="layui-form" action="{:url('add')}">
                    <div class="layui-col-md9">
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章分类<span class="form-required">*</span></label>
                            <div class="layui-input-inline">
                                <select name="category_id" lay-verify="required">
                                    <foreach name="categories" item="vo">
                                        <option value="{$vo.id}">{$vo.tab}{$vo.name}</option>
                                    </foreach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题<span class="form-required">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="title" lay-verify="required"
                                       placeholder="请输入文章标题">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">关键词</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="keywords"
                                       placeholder="请输入关键词，多个关键词用英文逗号分隔">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">来源</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="source" value="原创" placeholder="文章来源，默认原创">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">摘要</label>
                            <div class="layui-input-block">
                                <textarea class="layui-textarea" style="resize: none;" name="excerpt"
                                          placeholder="请输入文章摘要"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">正文<span class="form-required">*</span></label>
                            <div class="layui-input-block">
                                <textarea id="editor" style="width:100%;height:250px;" name="content"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" id="pics">
                            <div class="layui-form-label">相册图集</div>
                            <div class="layui-input-inline">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">
                                        选择多图
                                    </button>
                                    <div class="pic-more">
                                        <ul class="pic-more-upload-list" id="slide-pc-priview">
                                        </ul>
                                    </div>
                                    <input type="hidden" name="thumbs_count" value="" id="input-thumbs-count"/>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="general">添加</button>
                                <a class="layui-btn layui-btn-primary" href="javascript:history.back(-1);">返回</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章缩略图</label>
                            <div class="layui-input-block">
                                <a id="btn-thumb"> <img src="__STATIC__/images/default-thumb.png" id="thumb-preview"
                                                        width="135" height="135" style="cursor: pointer"/>
                                </a>
                                <div id="tips-thumb"></div>
                                <input type="hidden" name="thumb" id="input-thumb" value="">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">发布时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="published_time" id="dateTime" lay-verify="datetime"
                                       placeholder="yyyy-MM-dd HH:mm:ss" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="publish" title="发布" checked>
                                <input type="checkbox" name="is_top" title="置顶">
                                <input type="checkbox" name="recommended" title="推荐">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<include file="public@scripts"/>
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
<script>
    UE.getEditor("editor");

    var upload = layui.upload,
        laydate = layui.laydate;

    upload.render({
        elem: '#btn-thumb',
        url: "{:url('api/asset/fileUpload')}",
        size: 200,
        exts: 'jpg|png|bmp|jpeg',
        data: {path: 'article'},
        before: function (obj) {
            obj.preview(function (index, file, result) {
                $('#thumb-preview').attr('src', result); //图片链接（base64）
            });
        },
        done: function (res) {
            if (res.code == 0) {
                return layer.msg(res.message);
            }
            $('#input-thumb').val(res.filepath);
        }
    });

    var i = 0,
        j = 0;
    upload.render({
        elem: '#slide-pc',
        url: "{:url('api/asset/fileUpload')}",
        size: 3000,
        exts: 'jpg|png|jpeg',
        multiple: true,
        data: {path: 'article'},
        before: function (obj) {
            obj.preview(function (index, file, result) {
                var html = '<li><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">';
                html += '<input type="text" class="layui-input" name="pc_url[' + i + ']" value="" placeholder="http://" />';
                html += '<input type="text" class="layui-input" name="pc_alt[' + i + ']" placeholder="alt信息" value="' + file.name + '" /></li>';
                $('#slide-pc-priview').append(html);
                i++;
            });
        },
        done: function (res) {
            if (res.status == 0) {
                return layer.msg(res.message);
            }
            $('#slide-pc-priview').append('<input type="hidden" name="pc_src[' + j + ']" value="' + res.filepath + '" />');
            j++;
            $('#input-thumbs-count').val(j);
        }
    });

    laydate.render({
        elem: '#dateTime',
        type: 'datetime',
        value: new Date(),
        calendar: true
    });
</script>
</body>

</html>
